<!-- todo 枚举 -->
<template>
	<div class="card-tab-box">
		<PubTable :isTabInner="true" :tableData="crudData" :uploadUrl="uploadUrl" @selected-items="getSelection" />
	</div>
</template>

<script lang="jsx" setup>
import "@/components/PubTable/style/pubTablecss.scss";
import { tableData as mockData, caserData } from "@/components/PubTable/utils/mockData.js";
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
let { proxy } = getCurrentInstance();

console.log(258, caserData);
//全局数据配置
const crudData = ref({
	clums: [
		// {
		// 	type: "selection",
		// 	minWidth: 40,
		// 	label: "复选框",
		// 	fixed: "left",
		// },
		{
			type: "index",
			props: "index",
			label: "序号",
			width: 80,
			fixed: "left",
		},
		{
			props: "productName",
			label: "产品名称",
			search: {
				key: "productName",
				type: "input",
				placeholder: "搜索产品名称",
				minWidth: "200px",
				clearable: true,
				maxLength: 20,
			},
		},
		{
			props: "type",
			label: "通信方式",
			minWidth: "100px",
			search: {
				key: "type",
				type: "select",
				placeholder: "通信方式",
				clearable: true,
				maxLength: 20,
				optionList: [
					{
						label: "已完成",
						value: 1,
					},
					{
						label: "未完成",
						value: 0,
					},
				],
			},
		},
		{
			props: "updateTime",
			label: "更新时间",
			minWidth: "100px",
			search: {
				key: "updateTime",
				type: "timerange",
                startPlaceholder:"选择更新时间",
                endPlaceholder:"选择更新时间",
				separator: "至",
				clearable: true,
				maxLength: 20,
				timeFormatter: "YYYY-MM-DD HH:mm:ss",
			},
		}
	],
	handleBtns: [
		{
			text: "更新",
			onClick: () => {
				crudData.value.form.formName = "新增";
				crudData.value.form.formList = crudData.value.form.formList.map((item) => {
					if (item.type == "multSelect") {
						item.value = [];
					} else {
						item.value = null;
					}
					return item;
				});
				crudData.value.form.formShow = true;

				// showAdd.value = true;
			},
		},
	],
	// sortRule 默认排序规则,排序字段prop在 clums中加上sortable
	sortRule: { prop: "value3", order: "descending" }, // prop: 'value3', order: 'descending'||'ascending'
	// data 获取数据getTableData
	data: mockData,
	// pager 分页配置
	pager: {
		total: 11,
		pageIndex: 1,
		pageSize: 10,
		pagerLang: [10, 20, 50, 100],
		sizeChange: (e) => {
			// 改变每页条数
			crudData.value.pager.pageSize = e;
			crudData.value.pager.pageIndex = 1;
			getTableData();
		},
		pageIndexChange: (e) => {
			// 改变页码
			crudData.value.pager.pageIndex = e;
			getTableData();
		},
	},
	// form 弹窗配置 可自定义或直接配置
	form: {
		formName: "新增",
		formShow: false,
		formList: [
			{
				key: "productName",
				type: "input",
				label: "intput类型",
				placeholder: "请输入intput类型",
				maxLength: 20,
				validate: [
					{
						required: true,
						message: "请输入intput类型",
						trigger: "blur",
					},
				],
			},
			{
				key: "type",
				type: "multInput",
				label: "multInput文本域",
				placeholder: "请输入multInput文本域",
				maxLength: 200,
				validate: [
					{
						required: true,
						message: "请输入multInput文本域",
						trigger: "blur",
					},
				],
			},
			{
				key: "value3",
				type: "datetime",
				label: "日期选择器",
				placeholder: "请输入日期选择器",
				validate: [
					{
						required: true,
						message: "请输入日期选择器",
						trigger: "blur",
					},
				],
			},
			{
				key: "value4",
				type: "timerange",
				label: "日期范围选择器",
				placeholder: "请输入日期范围选择器",
				separator: "至",
				validate: [
					{
						required: true,
						message: "请输入日期范围选择器",
						trigger: "blur",
					},
				],
			},
			{
				key: "updateTime",
				type: "multSelect",
				label: "multSelect类型",
				placeholder: "请选择multSelect类型",
				validate: [
					{
						required: true,
						message: "请选择multSelect类型",
						trigger: "change",
					},
				],
				optionList: [
					{
						label: "张三",
						value: 0,
					},
					{
						label: "李四",
						value: 1,
					},
					{
						label: "王五",
						value: 2,
					},
				],
			},
			{
				key: "value6",
				type: "select",
				label: "select单选",
				placeholder: "请选择select单选",
				validate: [
					{
						required: true,
						message: "请选择select单选",
						trigger: "change",
					},
				],
				optionList: [
					{
						label: "1",
						value: 0,
					},
					{
						label: "2",
						value: 1,
					},
					{
						label: "3",
						value: 2,
					},
				],
			},
			{
				key: "value7",
				type: "input",
				label: "非必填类型",
				placeholder: "请输入非必填类型",
				maxLength: 20,
			},
			{
				key: "value8",
				type: "cascader",
				label: "cascader类型",
				placeholder: "请选择cascader类型",
				optionList: caserData,
				propset: {
					value: "id",
					label: "supervisionUnit",
				}
			},
		],
		handelFormShow: (name, flag) => {
			crudData.value.form.formName = name;
			crudData.value.form.formShow = flag;
		},
		handelSubmit: (data) => {
			if (crudData.value.form.formName == "新增") {
				//新增
				console.log("新增", data);
			} else {
				//编辑
				console.log("编辑", data);
			}
			//此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
			crudData.value.form.formShow = false;
		},
	},
	//查询参数回调
	searchCb: (e) => {
		console.log("searchCb", e);
		getTableData(e);
	},
	//重置回调
	reset: (e) => {
		console.log("reset", e);
		getTableData();
	},
});

const getTableData = (e) => {
	console.log("getTableData", e);
};

onMounted(() => {
	getTableData();
});

const uploadUrl = ref("/api/alarmPush/import");
var selectTion = reactive([]);
const getSelection = (val) => {
	selectTion = val;
	console.log("选中", selectTion);
};
</script>

<style lang="scss" scoped></style>
